Hypertext markup language (HTML) is a markup language typically used to define the style, appearance, and/or structure of a document displayed in a web browser. HTML and its successor languages, such as Extensible HTML (XHTML) have been generally used to define the style, appearance, and/or structure of web pages from the very early stages of the well-known World Wide Web (the “web”) portion of the Internet. Traditionally, markup tags defining the structure, such as those defining headings, paragraphs, lists, tables, and the like (i.e., structural markup), were included in an HTML document alongside markup tags defining the style and appearance of the page content, such as bold, underlined, font, font size, and the like (i.e., stylistic markup). To enhance the appearance of web pages, developers included increasing amounts of stylistic markup in such markup language documents. However, with all of such stylistic markup, the markup language coding (e.g., HTML) for even the most basic web page often became undesirably long and complicated, which resulted in increased difficulty in creating and editing the markup language documents defining the web pages. More recently, style sheet languages, such as Cascading Style Sheets (CSS), have been developed to aid in defining the styling for a given document, such as a web page.
Now, the World Wide Web (WWW) contains web pages that use both markup language documents (e.g., HTML documents) and style sheet language documents (e.g., CSS). Over the past several years, HTML has become the predominant markup language for the creation of web pages. It describes the structure and content (e.g., text, forms, embedded images, and/or other objects) of a web page. Meanwhile, CSS is a popular style sheet language used to describe the presentation (e.g., colors, fonts, layout, etc.) of documents written in markup language. By using a markup language (e.g., HTML) and style sheet language (e.g., CSS) together, web designers are able to advantageously separate a web page's structure and content (written in markup language) from its presentation formatting (written in style sheet language). For instance, using CSS, developers are generally able to define the style of an entire web document by defining styles in a CSS document, and applying those styles to the content and structure defined by a markup language document. Because the style is applied to the content, one style may be applied to multiple sections of the markup language document, thus reducing the size of the coding for defining the resulting web page. Moreover, developers may change the entire appearance of a web page by changing the CSS without effecting the content of the page.
Generally speaking, web pages are viewed using web browsers. Web browsers interpret HTML and CSS elements of a web page, and render the web page to a user. There are many web browsers available today, including, as examples, Microsoft Corp.'s INTERNET EXPLORER®, Mozilla Corp.'s FIREFOX®, Opera Software ASA's OPERA®, Netscape Communications Corp.'s NETSCAPE®, and Apple Computer Corp.'s SAFARI®, among others. When creating or modifying web pages, designers frequently use an authoring tool (as may be included in an application development environment) such as, for example, Adobe Systems Inc.'s DREAMWEAVER® and/or GOLIVE® for coding the markup language document defining the structure/content and for coding a style sheet language document defining the presentation format of the web page.
Though CSS is quickly becoming a best-practices standard for controlling the style of web documents, it is typically used only by experienced web developers because of its complexity. CSS can be hard to understand, and adjusting certain style attributes, such as the width of a sidebar column, may break everything else in the layout due to inter-related properties. Part of the difficulty in working with CSS is a result of the way in which display elements are defined in CSS. Attributes for each of various display elements are defined independently in CSS. That is, while a relationship may be desired between display elements, CSS does not support a definition of any such relationship but instead requires that a developer define the attributes of each display element independent of any other display element. For example, a developer may define multiple columns (display elements) to be included in a presentation format for a web page. However, such attributes as the position, width, height, etc. are defined independently for each column. Thus, if the attributes are changed for one of the columns, it may destroy a desired relationship between the two columns unless attributes of the other column are also modified. For example, the two columns may be positioned side-by-side, wherein a change widening the width of the first column may cause the first column to overlap with the second column, unless the position and/or width of the second column is independently changed. Because CSS does not support simple expressions, there is no easy way for developers to manage the inter-relationships desired for display elements.
Further difficulty arises as a result of how attributes of display elements are defined in CSS. In general, many attributes of display elements are defined in an indirect manner. For instance, the locations of a left edge and right edge of a column are generally each defined with reference to the edge of its container. For instance, the left edge of the column may be defined as being located a certain number of pixels (or % or ems) from the left edge of its container, wherein the container may be an entire page or some other block-level element, as examples. In many instances, certain attributes of the column may be defined indirectly in the CSS code. As an example, suppose a 3 column layout is defined, with a left sidebar of fixed width, a right sidebar of fixed width, and a main content column in the center, which fills up the remaining available space. This may be achieved by not specifying a width on the main (center) column, but rather specifying its left and right margins, which essentially tell where the left and right edges of the center column should be relative to the left and right edges of its container. Such indirect definitions of certain attributes of display elements in the CSS code further adds to the difficulty in defining attributes of display elements and maintaining a desired relationship between the display elements.